<template>
  <div class="checkPlanDetail zy-content">
    <div class="title">
      <span>查看检测计划</span>
      <div class="back" @click="back">返回上一级</div>
    </div>
    <div class="titleItem">
      <span>检测对象</span>
      <div class="checkObject">
        <div
          v-for="(item, index) in checkObject"
          :key="index"
          class="checkObjectItem"
        >
          <div class="checkObjectName">{{ item.name }}</div>
          <div class="checkObjectValue">{{ item.value }}</div>
        </div>
      </div>
      <div class="searchBox">
        <Form label-position="right" :label-width="100" class="search-form">
          <div class="label">
            <FormItem label="所属工厂" class="item">
              <Select
                v-model="formInline.category"
                filterable
                clearable
                :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                  v-for="(item, index) of category"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="生产线描述" class="item">
              <Select
                v-model="formInline.position"
                filterable
                clearable
                :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                  v-for="(item, index) of position"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="制造商" class="item">
              <Select
                v-model="formInline.classification"
                filterable
                clearable
                :placeholder="`${$t('common.inputInfo')}`"
              >
                <Option
                  v-for="(item, index) of classification"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
             <FormItem :label="`${$t('ledger.EquipmentType')}:`" class="item">
              <Input
                type="text"
                v-model="text"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </FormItem>
            <FormItem label="" class="item">
              <Button type="primary">{{$t('common.Query')}}</Button>
            </FormItem>
          </div>
        </Form>
        <div>
          <Table ref="selection" :columns="columns" :data="data"></Table>
          <div class="pageWrap">
            <Page
              :total="total"
              :page-size="pageSize"
              :page-size-opts="$variable.pageSizes"
              :current="pageNum"
              @on-change="changePageNum"
              @on-page-size-change="changePageSize"
              show-sizer
              show-total

            />
          </div>
        </div>
      </div>
    </div>
    <div class="titleItem">
      <span>检测时间</span>
      <div class="checkObject">
        <div
          v-for="(item, index) in checkTime"
          :key="index"
          class="checkObjectItem"
        >
          <div class="checkObjectName">{{ item.name }}</div>
          <div class="checkObjectValue">{{ item.value }}</div>
        </div>
      </div>
    </div>
    <div class="titleItem">
      <span>检测内容</span>
      <div class="contentTable">
        <Table ref="selection" :columns="contentColumns" :data="contentData">
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="seeDetail(row)"
              ><Icon type="md-eye" size="18" />{{$t('common.CheckDetial')}}</span
            >
          </template>
        </Table>
      </div>
    </div>
    <div class="titleItem">
      <span>A客户精度检测结果</span>
      <div class="checkObject">
        <div
          v-for="(item, index) in userA"
          :key="index"
          class="checkObjectItem"
        >
          <div class="checkObjectName">{{ item.name }}</div>
          <div class="checkObjectValue">
            <div v-if="item.value">
              {{ item.value }}
            </div>
            <div v-else class="checkObjectValueItem">
              <RadioGroup v-model="resultA">
                <Radio label="detected">已检测</Radio>
                <Radio label="noDetected">未检测</Radio>
              </RadioGroup>
              <Upload
                :on-error="uploadErroA"
                :before-upload="beforeUploadA"
                :show-upload-list="false"
                action=""
              >
                <Button icon="ios-cloud-upload-outline"></Button>
              </Upload>
              <div class="uploadName" v-if="fileA !== null">{{fileA.name}}<Icon type="md-trash" color="red" @click="deleteFileA" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="titleItem">
      <span>G客户精度检测结果</span>
      <div class="checkObject">
        <div
          v-for="(item, index) in userG"
          :key="index"
          class="checkObjectItem"
        >
          <div class="checkObjectName">{{ item.name }}</div>
          <div class="checkObjectValue">
            <div v-if="item.value">
              {{ item.value }}
            </div>
            <div v-else class="checkObjectValueItem">
              <RadioGroup v-model="resultG">
                <Radio label="detected">已检测</Radio>
                <Radio label="noDetected">未检测</Radio>
              </RadioGroup>
              <Upload
                :on-error="uploadErroG"
                :before-upload="beforeUploadG"
                :show-upload-list="false"
                action=""
              >
                <Button icon="ios-cloud-upload-outline"></Button>
              </Upload>
              <div class="uploadName" v-if="fileG !== null">{{fileG.name}}<Icon type="md-trash" color="red" @click="deleteFileG" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal :mask-closable="false"
      v-model="visible"
      title="检测内容详情"
      class="checkContentModal"
      width="1200"
      footer-hide
    >
      <contentDetail></contentDetail>
    </Modal>
  </div>
</template>

<script>
import contentDetail from "./contentDetail.vue";
export default {
  name: "checkDetail",
  components: {
    contentDetail,
  },
  data() {
    return {
      formInline: {},
      text: "",
      visible: false,
      category: [
        { name: "全部", key: "" },
        { name: "CNC", key: "CNC" },
        { name: "PLC", key: "PLC" },
        { name: "IPC", key: "IPC" },
      ],
      position: [{ name: "全部", key: "" }],
      classification: [{ name: "全部", key: "" }],
      checkObject: [
        { name: "计划名称", value: "cnc设备定期检测" },
        { name: "设备类别", value: "cnc" },
        { name: "检测位置", value: "主轴" },
        { name: "检测分类", value: "润滑" },
      ],
      checkTime: [
        { name: "检测方式", value: "定期检测" },
        { name: "触发间隔", value: "次/日" },
        { name: "首次生成时间", value: "2021年9月15日 16:38:50" },
        { name: "计划截止时间", value: "2021年9月15日 16:38:50" },
      ],
      checkContent: [
        { name: "检测项目", value: "主轴清洗" },
        { name: "检测方法", value: "主轴清洗" },
      ],
      checkStandard: [
        { name: "下限", value: "0.5" },
        { name: "上限", value: "1.0" },
        { name: "单位", value: "摄氏度" },
      ],
      checkTool: [
        { name: "物料代码", value: "" },
        { name: "使用工具", value: "" },
        { name: "规格型号", value: "" },
        { name: "品牌", value: "" },
        { name: "数量", value: "" },
        { name: "保养方式", value: "" },
      ],
      checkMaterial: [
        { name: "物料代码", value: "" },
        { name: "物料名称", value: "" },
        { name: "数量", value: "" },
        { name: "单价", value: "" },
        { name: "总价", value: "" },
      ],
      columns: [
        { title: `${ this.$t('common.Belongsfactory') }`, key: "category" },
        { title: `${ this.$t('maintenance.EquipmentNo') }`, key: "position" },
        { title: `${ this.$t('maintenance.EquipmentName') }`, key: "classification" },
        { title: `${ this.$t('ledger.EquipmentType') }`, key: "cycle" },
        { title: `${ this.$t('fault.FunctionalLocation') }`, key: "content" },
        { title: `${ this.$t('common.Productioncode') }`, key: "function" },
        { title: `${ this.$t('common.ProductionDescription') }`, key: "describe" },
      ],
      data: [
        {
          category: "金科森",
          position: "EQ100000033000037",
          classification: "EQ100000033000037",
          cycle: "EQ100000033000037",
          content: "EQ100000033000037",
          function: "A180",
          describe: "机加工CNC",
        },
        {
          category: "金科森",
          position: "EQ100000033000037",
          classification: "EQ100000033000037",
          cycle: "EQ100000033000037",
          content: "EQ100000033000037",
          function: "A180",
          describe: "机加工CNC",
        },
        {
          category: "金科森",
          position: "EQ100000033000037",
          classification: "EQ100000033000037",
          cycle: "EQ100000033000037",
          content: "EQ100000033000037",
          function: "A180",
          describe: "机加工CNC",
        },
        {
          category: "金科森",
          position: "EQ100000033000037",
          classification: "EQ100000033000037",
          cycle: "EQ100000033000037",
          content: "EQ100000033000037",
          function: "A180",
          describe: "机加工CNC",
        },
        {
          category: "金科森",
          position: "EQ100000033000037",
          classification: "EQ100000033000037",
          cycle: "EQ100000033000037",
          content: "EQ100000033000037",
          function: "A180",
          describe: "机加工CNC",
        },
        {
          category: "金科森",
          position: "EQ100000033000037",
          classification: "EQ100000033000037",
          cycle: "EQ100000033000037",
          content: "EQ100000033000037",
          function: "A180",
          describe: "机加工CNC",
        },
      ],
      contentColumns: [
        { title: "检测项目", key: "content" },
        { title: "检测方法", key: "checkFunction" },
        { title: "单位", key: "company" },
        { title: "上限", key: "up" },
        { title: "下限", key: "down" },
        { title: `${ this.$t('common.operation') }`, slot: "action", width: 150, align: "center" },
      ],
      contentData: [
        {
          content: "刀库刀套清理",
          checkFunction: "动作顺畅、定位准确",
          company: "--",
          up: "--",
          down: "--",
        },
        {
          content: "打黄油",
          checkFunction: "无松动",
          company: "--",
          up: "--",
          down: "--",
        },
        {
          content: "主轴风扇清理",
          checkFunction: "动作顺畅、定位准确",
          company: "--",
          up: "--",
          down: "--",
        },
      ],
      total: 64,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      resultA: "",
      userA: [
        { name: "检测精度", value: "" },
        { name: "检测试剂", value: "2021/12/1 11:00:11" },
        { name: "检测人", value: "李四" },
      ],
      fileA: null,
      resultG: "",
      userG: [
        { name: "检测精度", value: "" },
        { name: "检测试剂", value: "2021/12/1 11:00:11" },
        { name: "检测人", value: "李四" },
      ],
      fileG: null,
    };
  },
  methods: {
    back() {
      this.$emit("changeDetailVisible", false);
    },
    changePageNum() {},
    changePageSize() {},
    seeDetail() {
      this.visible = true;
    },
     beforeUploadA(file) {
      this.fileA = file;
      return false;
      },
      uploadErroA(response) {
        this.$Message.warning({ content: response, duration: 6, closable: true });
      },
      deleteFileA() {
        this.fileA = null;
      },
      beforeUploadG(file) {
        this.fileG = file;
        return false;
      },
      uploadErroG(response) {
        this.$Message.warning({ content: response, duration: 6, closable: true });
      },
      deleteFileG() {
        this.fileG = null;
      },
  },
};
</script>
<style lang="scss">
.checkPlanDetail {
  background: #fff;
  .title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    align-items: center;
    .back {
      color: #187bdb;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
    }
  }
  .titleItem {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    .checkObject {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      border-bottom: 2px solid #d7d7d7;
      .checkObjectItem {
        display: flex;
        flex: 0 33%;
        .checkObjectName {
          height: 40px;
          line-height: 40px;
          width: 30%;
          border: 1px solid #eeeeee;
          background: #f5f6f7;
          text-align: right;
          padding-right: 10px;
        }
        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          width: 70%;
          border: 1px solid #eeeeee;
          padding-left: 10px;
          .checkObjectValueItem {
            display: flex;
            height: 100%;
            align-items: center;
            .uploadName {
              border: 1px dotted #dddddd;
              height: 32px;
              line-height: 32px;
              border-radius: 6px;
              margin-left: 10px;
              font-size: 14px;
              padding: 0 10px;
            }
          }
        }
      }
    }
    .searchBox {
      .label {
        display: flex;
      }
    }
    .contentTable {
      padding: 20px;
    }
  }
  .titleItem::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 20px;
    top: 12px;
    left: 0px;
    background: #187bdb;
  }
}
</style>
